<template>
	<view class="yb-virtual-list yb-flex yb-flex-1" ref="ybVirtualList" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<yb-list
		ref="list"
		:custom-class="rootClass"
		:custom-id="customIdSync"
		:custom-style="customStyleSync"
		:loading="loading"
		:empty="empty"
		:scrollable="scrollable"
		:enableScrolling="true"
		@scroll="onScroll"
		:pulldown="pulldown"
		:loadmore="loadmore"
		@pulldown="onPulldown"
		@loadmore="onLoadmore"
		type="scroll">
			<template v-slot:pulldown-symbol>
				<slot name="pulldown-symbol"></slot>
			</template>
			<template v-slot:pulldown-loading>
				<slot name="pulldown-loading"></slot>
			</template>
			<template v-slot:pulldown-success>
				<slot name="pulldown-success"></slot>
			</template>
			<template v-slot:pulldown-fail>
				<slot name="pulldown-fail"></slot>
			</template>
			<template v-slot:pulldown-end>
				<slot name="pulldown-end"></slot>
			</template>
			<template v-if="isShow">
				<view class="yb-virtual-list-content yb-flex" :style="{
					transform: 'translateY(' + translateY + 'px)',
					top: contentTop
				}">
					<view v-for="(item, index) in virtualList" :key="item">
						<slot :name="item"></slot>
					</view>
					<!-- <slot :virtualList="virtualList"></slot> -->
				</view>
				<view class="yb-virtual-list-height" :style="{height: (data.length * Util.unitpixel(height)) + 'px'}"></view>
			</template>
			<template v-slot:loadmore-symbol>
				<slot name="loadmore-symbol"></slot>
			</template>
			<template v-slot:loadmore-loading>
				<slot name="loadmore-loading"></slot>
			</template>
			<template v-slot:loadmore-fail>
				<slot name="loadmore-fail"></slot>
			</template>
			<template v-slot:loadmore-end>
				<slot name="loadmore-end"></slot>
			</template>
		</yb-list>
		</view>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			loading: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			empty: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			pulldown: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			loadmore: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			//允许滚动
			scrollable: {
				type: Boolean,
				default: true
			},
			//监听滚动事件
			enableScrolling: {
				type: Boolean,
				default: false
			},
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			height: {
				type: [Number,String],
				default: 300
			},
			//最大展示数据量
			count: {
				type: Number,
				default: 20
			}
		},
		computed: {
			Util () {
				return Util
			},
			virtualList () {
				let arr = []
				for ( let i = 0; i < this.count; i++ ) {
					if ( this.startIndex + i < this.data.length ) {
						arr.push(this.startIndex + i)
					}
				}
				return arr
				// return this.data.slice(this.startIndex, Math.min(this.startIndex + this.count, this.data.length))
			},
			translateY () {
				return this.scrollTop - (this.scrollTop % Util.unitpixel(this.height))
			},
			rootClass () {
				return 'yb-flex-1 ' + this.customClassSync
			},
			contentTop () {
				// #ifdef APP-NVUE
				if ( typeof this.pulldown == 'object' ) {
					return this.pulldown.show ? '175rpx' : 0
				} else {
					return this.pulldown ? '175rpx' : 0
				}
				// #endif
				// #ifndef APP-NVUE
				return 0
				// #endif
			}
		},
		data () {
			return {
				isShow: false,
				startIndex: 0,
				scrollTop: 0
			}
		},
		mounted () {
			this.$nextTick(function () {
				setTimeout(() => {
					this.isShow = true
				}, 100)
			})
		},
		methods: {
			onScroll (e) {
				this.scrollTop = Math.abs(e.scrollTop)
				this.startIndex = Math.floor(this.scrollTop / Util.unitpixel(this.height))
				this.$emit('scroll', e)
			},
			onPulldown (callback) {
				this.$emit('pulldown', callback)
			},
			onLoadmore (callback) {
				this.$emit('loadmore', callback)
			},
			backTop () {
				this.$refs.list.backTop()
			},
			//重置加载更多状态
			resetLoadmore () {
				this.$refs.list.resetLoadmore()
			},
			//设置加载更多为完毕状态
			setLoadmoreEnd () {
				this.$refs.list.setLoadmoreEnd()
			},
			//设置加载更多为成功状态
			setLoadmoreSuccess () {
				this.$refs.list.setLoadmoreSuccess()
			},
			//设置加载更多为失败状态
			setLoadmoreFail () {
				this.$refs.list.setLoadmoreFail()
			},
			scrollToIndex (index) {
				this.scrollTo(Util.unitpixel(this.height) * index)
			},
			scrollTo (offset, animated = false) {
				this.$refs.list && this.$refs.list.scrollTo(offset, animated)
			},
			scrollToElement (element, options = {}) {
				this.$refs.list && this.$refs.list.scrollToElement(element, options)
			}
		}
	}
</script>

<style scoped>
	.yb-virtual-list-content {
		position: absolute;
		left: 0;
		right: 0;
	}
</style>
